<template>
  <div class="app-container">
    <el-row>
      <el-col>
        <el-button icon="el-icon-arrow-left" type="text" @click="delRouter"
          >返回</el-button
        ><span>| 新增隐患记录</span>
      </el-col>
    </el-row>
    <el-form
      ref="form"
      :model="form"
      inline
      label-width="160px"
      style="margin-top: 80px"
    >
      <el-row>
        <el-col>
          <el-form-item label="检查类型">
            <el-select
              v-model="form.checkType"
              placeholder="请选择检查类型"
              style="width: 400px"
            >
              <el-option
                v-for="dict in formList.checkTypeList"
                :key="dict.id"
                :label="dict.checkTypeName"
                :value="dict.checkTypeNo"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="整改人">
            <el-select
              v-model="form.revisePeople"
              placeholder="请选择整改人"
              style="width: 400px"
            >
              <el-option
                v-for="(item, index) in formList.revisePeopleList"
                :key="index"
                :value="item.userName"
                :label="item.nickName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col>
          <el-form-item label="责任区域">
            <treeselect
              style="width: 400px"
              :normalizer="normalizerList"
              v-model="form.dutyArea"
              :options="formList.dutyAreaList"
              :default-expand-level="100"
              placeholder="请选择责任区域"
            />
          </el-form-item>
          <el-form-item label="整改时限">
            <el-date-picker
              style="width: 400px"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.reviseTheDates"
              type="datetime"
              placeholder="请选择整改时限"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col>
          <el-form-item label="分包单位">
            <el-select
              v-model="form.subpackageUnitIds"
              placeholder="请选择分包单位"
              style="width: 400px"
            >
              <el-option
                v-for="(item, index) in formList.getSubUnitsList"
                :key="index"
                :value="item.id"
                :label="item.enterpriseName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="事故隐患">
            <el-radio v-model="form.accidentHidden" label="1">一般</el-radio>
            <el-radio v-model="form.accidentHidden" label="2">重大</el-radio>
          </el-form-item>
        </el-col>

        <el-col>
          <el-form-item label="通知人">
            <el-select
              v-model="form.notifier"
              placeholder="请选择通知人"
              style="width: 400px"
            >
              <el-option
                v-for="(item, index) in formList.revisePeopleList"
                :key="index"
                :value="item.userName"
                :label="item.nickName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="复查人">
            <el-select
              v-model="form.reviewUserName"
              placeholder="请选择复查人"
              style="width: 400px"
            >
              <el-option
                v-for="(item, index) in formList.revisePeopleList"
                :key="index"
                :value="item.userName"
                :label="item.nickName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col>
          <el-form-item label="补充说明">
            <el-input
              type="textarea"
              :rows="4"
              v-model="form.supplement"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <el-form-item label="整改要求">
            <el-input
              type="textarea"
              :rows="4"
              v-model="form.reviseRequire"
              style="width: 400px"
            ></el-input>
          </el-form-item>
        </el-col>


        <el-form-item label="安全隐患">
          <treeselect
            :disable-branch-nodes="true"
            style="width: 970px"
            :normalizer="normalizer"
            v-model="form.listId"
            :options="dutyAreaList"
            :default-expand-level="100"
            placeholder="安全隐患"
            @select="departTreeSelected"
          />
        </el-form-item>
        <el-tooltip
          class="item"
          effect="dark"
          content="点击查看依据"
          placement="right"
        >
          <i
            class="el-icon-document"
            style="
              color: rgb(102, 158, 255);
              display: inline-block;
              margin-top: 6px;
              font-size: 25px;
              cursor: pointer;
            "
            @click="dialogVisible = true"
          ></i>
        </el-tooltip>

        <el-col>
          <el-form-item label="现场照片">
            <ImageUpload></ImageUpload>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item style="margin-left: 160px">
        <el-button type="primary" @click="submitData">保存</el-button>
        <el-button  @click="delRouter">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="dialogVisible" width="50%">
      <el-descriptions title="隐患信息" direction="vertical" :column="4" border>
        <el-descriptions-item label="隐患信息">{{
          formData.riskFactor
        }}</el-descriptions-item>
        <el-descriptions-item label="风险等级">{{
          formData.riskLevel
        }}</el-descriptions-item>
        <el-descriptions-item label="风险标识" :span="2">{{
          formData.riskRecognize
        }}</el-descriptions-item>
        <el-descriptions-item label="依据">{{
          formData.normativeBasis
        }}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  getAddd,
  getRevisePeople,
  getDutyArea,
  getCheckType,
  getSubUnits,
  formSubmit,
} from "@/api/biz/ledger/ledger";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  dicts: ["biz_check_result", "list_risk_level", "list_danger_level"],
  data() {
    return {
      form: {
        checkType: null,
        revisePeople: null,
        subpackageUnitIds: null,
        dutyArea: null,
        reviewUserName: null,
        reviseRequire: null,
        accidentHidden: "1",
        reviseTheDates: null,
        listId: null,
        typeNo: null,
        riskLevel: null,
        riskFactor: null,
        reviseRequire: null,
        projectId: this.$store.state.app.selectData,
        hiddenDangerStatus:"1",
      },
      treeData: [],
      originTreeData: [],
      isCurrentEnd: false,
      dutyAreaList: [],
      dialogVisible: false,
      //清单数据
      formData: {
        controlMeasure: null,
        dangerLevel: null,
        id: null,
        level: null,
        normativeBasis: null,
        riskFactor: null,
        riskLevel: null,
        riskLevelValue: null,
        riskRecognize: null,
        typeNo: null,
      },
      queryParams: {
        projectId: this.$store.state.app.selectData,
        hiddenTrouble: "0",
      },
      //下拉数据
      formList: {
        revisePeopleList: [], //整改人
        dutyAreaList: [],
        checkTypeList: [],
        getSubUnitsList: [],
      },
    };
  },

  methods: {
    //关闭
    delRouter() {
      this.$router.push({ name: "Ledger" });
      this.$store.state.tagsView.visitedViews =
        this.$store.state.tagsView.visitedViews.filter(
          (item) => item.name !== "ledgerAdd"
        );
    },
    getList() {
      getAddd().then((res) => {
        this.dutyAreaList = res.data;
        this.FormatTheData(this.dutyAreaList);
      });
      //整改人
      getRevisePeople(this.queryParams).then((data) => {
        this.formList.revisePeopleList = data.rows;
      });
      getDutyArea(this.queryParams).then((response) => {
        this.formList.dutyAreaList = response.data;
      });
      getCheckType(this.queryParams).then((response) => {
        this.formList.checkTypeList = response.data;
      });
      getSubUnits().then((response) => {
        this.formList.getSubUnitsList = response.rows;
      });
    },
    normalizer(node) {
      return {
        ...node,
        label: node.label,
      };
    },
    normalizerList(node) {
      return {
        ...node,
        label: node.name,
      };
    },
    departTreeSelected(data) {
      this.formData = data;
      this.form.typeNo = data.typeNo;
      this.form.riskLevel = data.riskLevelValue;
      this.form.accidentHidden = data.dangerLevelValue;
      this.form.riskFactor = data.riskFactor;
      this.form.reviseRequire = data.controlMeasure;
    },
    //格式化数据
    FormatTheData(data) {
      data.forEach((item) => {
        if (item.children != null) {
          item.children.forEach((child) => {
            if (child.children != null) {
              this.FormatTheData(child.children);
            } else {
              child.listItemVos.forEach((listItem) => {
                listItem.label = listItem.riskFactor;
              });
              child.children = child.listItemVos;
            }
          });
        } else {
          item.listItemVos.forEach((listItem) => {
            listItem.label = listItem.riskFactor;
          });
          item.children = item.listItemVos;
        }
      });
    },
    //保存
    submitData() {
      formSubmit(this.form).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "新增成功！",
            type: "success",
          });
          this.$router.push({ name: "Ledger" });
          this.$store.state.tagsView.visitedViews =
            this.$store.state.tagsView.visitedViews.filter(
              (item) => item.name !== "ledgerAdd"
            );
        }
      })
    },
  },

  components: {
    Treeselect,
  },

  computed: {
    ...mapState(["app"]),
  },

  created() {
    this.getList();
  },
  watch: {
    $route: {
      handler(newVal, oldVal) {
        if (oldVal.name == "ledgerAdd") {
          this.$store.state.tagsView.visitedViews =
            this.$store.state.tagsView.visitedViews.filter(
              (item) => item.name !== "ledgerAdd"
            );
        }
      },
      deep: true,
    },
    app: {
      handler(newVal, oldVal) {
        this.queryParams.projectId = newVal.selectData;
        this.form.projectId = newVal.selectData;
        this.getList();
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
.dialog-box {
  height: 500px;
  border: 1px solid #000;
  display: flex;
}
</style>
